import {downloadFileUrl, fullDownloadFileUrl} from '@/services/system/file';
import { formatFileSize } from '@/utils/format';
import { Descriptions, Image, Space, Tag } from 'antd';
import { SysFile } from '../type';

interface FileDetailProps {
  data: SysFile;
}

const FileDetail: React.FC<FileDetailProps> = ({ data }) => {
  const fileUrl = downloadFileUrl(data.id);
  const fileExtension = data.filesName?.split('.').pop()?.toLowerCase();
  const isImage = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg'].includes(fileExtension || '');

  return (
    <Space direction="vertical" size="middle" style={{ width: '100%' }}>
      <Descriptions
        bordered
        column={1}
        size="small"
        labelStyle={{ width: '100px', fontWeight: 'bold' }}
        contentStyle={{ padding: '8px 12px' }}
      >
        <Descriptions.Item label="文件名" span={1}>
          <div style={{ wordBreak: 'break-all' }}>{data.filesName}</div>
        </Descriptions.Item>
        <Descriptions.Item label="文件类型">
          <Tag color="blue">{data.type || '未知'}</Tag>
        </Descriptions.Item>
        <Descriptions.Item label="文件大小">{formatFileSize(data.size)}</Descriptions.Item>
        <Descriptions.Item label="MD5">
          <code style={{ wordBreak: 'break-all' }}>{data.md5}</code>
        </Descriptions.Item>
        <Descriptions.Item label="状态">
          <Tag color={data.enable === 1 ? 'success' : 'error'}>
            {data.enable === 1 ? '可用' : '不可用'}
          </Tag>
        </Descriptions.Item>
        <Descriptions.Item label="创建时间">{data.createdAt}</Descriptions.Item>
        <Descriptions.Item label="文件链接">
          <a
            href={fileUrl}
            target="_blank"
            rel="noopener noreferrer"
            style={{ wordBreak: 'break-all' }}
          >
            {fileUrl}
          </a>
        </Descriptions.Item>
      </Descriptions>

      {isImage && (
        <div style={{ textAlign: 'center' }}>
          <Image
            src={fileUrl}
            alt={data.filesName}
            style={{ maxWidth: '100%', maxHeight: '200px', objectFit: 'contain' }}
          />
        </div>
      )}
    </Space>
  );
};

export default FileDetail;
